<template>
    <div class="wrapper autoshow">
        <!-- 头图 -->
        <div class="auto_img">
            <img :src="ui.head" alt="头图">
        </div>

        <!--表单块 -->
        <div ref="signForm" class="sign_form" :style="`backgroundColor: ${ui.bg_color}`">
            <div class="sign_form_header" :style="`backgroundColor: #fff`">
                <ul class="count_time">
                    <span>免费报名，观展有礼：</span>
                    <span><b> {{ countdown.day }} </b>天&ensp;</span>
                    <span><b> {{ countdown.hour }} </b>时&ensp;</span>
                    <span><b> {{ countdown.minute }} </b>分&ensp;</span>
                    <span><b> {{ countdown.second }} </b>秒</span>
                </ul>
                <!-- 请选择品牌车型 -->
                <el-form :model="clue_info" ref="actionForm" hide-required-asterisk label-position="top">
                    <!-- 请输入姓名  请输入电话-->
                    <el-form-item prop="name">

                        <el-input v-model="clue_info.name" placeholder="请输入您的姓名"
                                  class="boderSolid"></el-input>
                    </el-form-item>
                    <el-form-item prop="phone">

                        <el-input v-model="clue_info.phone" placeholder="请输入您的手机号" type="number"
                                  class="boderSolid"></el-input>
                    </el-form-item>
                    <el-form-item prop="car" label="选择您的意向车型" class="radio_50" v-if="car_list">
                        <template slot="label">
                            <span style="font-size: 14px;margin-bottom: -3px">请选择您的意向车型</span>
                            <i class="iconfont icon-bitian" style="color: red"></i>
                        </template>
                        <div v-if="info.level == 2">
                            <ul class="seriesUl">
                                <p v-for="(item,index) in car_list" :key="index" class="li_25">
                                    <span class="li_item" @click="choose_brand(index)"
                                          :class="current_index == index ? 'activedLi': ''">{{item.title}}</span>
                                </p>
                            </ul>
                            <div class="carWrapper">
                                <el-radio-group v-model="clue_info.series" class="radio_group_wrapper">
                                    <el-radio
                                        v-for="(item, index) in car_list[current_index].child"
                                        :key="current_index + '' + index"
                                        :label="item" class="radio_item">{{item}}
                                    </el-radio>
                                </el-radio-group>
                            </div>
                        </div>
                        <div v-if="info.level ==1">
                            <div class="carWrapper">
                                <el-radio-group v-model="clue_info.series" class="radio_group_wrapper">
                                    <el-radio
                                        v-for="(item,index) in car_list"
                                        :key="current_index + '' + index"
                                        :label="item" class="radio_item">{{item}}
                                    </el-radio>
                                </el-radio-group>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item v-if="info.money > 0" class="pay_formItem">
                        <template slot="label">
                            <span style="font-size: 14px;margin-bottom: -3px">请选择抵用券</span>
                            <i class="iconfont icon-bitian" style="color: red"></i>
                        </template>
                        <el-radio :v-model="'1'" label="1" value="1">{{to_yuan(info.money)}}元门票赠豪华礼包</el-radio>
                    </el-form-item>
                    <!-- 按钮点击 -->
                    <el-form-item>
                        <div class="btn_continer" @click="submit_order()" :disabled="info.is_stop"
                             :class="{ opacity: info.is_stop }">
                            <div class="fill_in_info">
                                <img src="../../assets/images/byd/fill_in_info.png" alt="">
                            </div>
                            <div class="pointer">
                                <img src="../../assets/images/byd/pointer.png" alt="">
                            </div>
                            <span v-if="info.is_stop" class="btn_text">活动已结束</span>
                            <span v-else class="btn_text">立即报名抢购</span>
                        </div>
                    </el-form-item>
                    <!--隐私声明-->
                    <policy></policy>
                     <!--轮播-->
                    <banner></banner>

                </el-form>
            </div>
        </div>

        <!-- 监测图片滚动的高度 -->
        <div class="auto_img" ref="tailImage">
            <img :src="ui.tail" alt="详情图">
        </div>
        <!--地图-->
        <div class="address">
            <i class="el-icon-location"></i>
            {{info.address}}
        </div>
        <div id="map_continer"></div>
        <copyright></copyright>
        <!--销售顾问电话-->
        <template v-if="sale_info">
            <div class="saler">
                <img :src="sale_info.headimgurl">
                <span :data-title="sale_info.name">{{sale_info.name}}</span>
            </div>
            <div class="concat_tel"  @click="clickPhone(sale_info.phone)">
                <img src="../../assets/images/byd/phone_01.png">
            </div>

        </template>

        <!-- 校验失败提示-->
        <div class="custom_valid_error" v-if="show_flag.is_error">
            {{valid_info}}
        </div>
    </div>
</template>

<script>

    import _time from "../../utils/_time";
    import _wx from "../../common/_wx";
    import _url from "../../utils/_url";
    import api_activity from "../../api/api_activity";
    import banner from "../../components/banner";
    import policy from "../../components/policy";
    import Copyright from "../../components/copyright";
    import _music from "../../common/_music";
    import api_user from "../../api/api_user";
    import _map from "../../common/_map";
    import _confirm from "../../common/_confirm";
    import api_clue from "../../api/api_clue";
    import _router from "../../common/_router";
    import _object from "../../utils/_object";
    import _regular from "../../utils/_regular";
    import _float from "../../utils/_float";
    import api_weixin from "../../api/api_weixin";
    import api_saler from "../../api/api_saler";

    export default {
        name: "common",
        components: {
            Copyright,
            banner,
            policy
        },
        data() {
            return {
                activity_id: 0, //活动ID
                sid: 0, //销售ID

                info:{
                    stime: 0,
                    etime: 0,
                    is_stop: false, //项目结束标记
                    latitude: '', //经度
                    longitude: '', //纬度
                    money: 0,
                    name: '', //经销商
                    theme: '', //主题
                    describe: '', //描述
                    address: '', //地址
                    level: '', //品牌
                },

                //倒计时
                countdown: {
                    day: 0,
                    hour: 0,
                    minute: 0,
                    second: 0,
                },

                // 车型树数据
                car_list: null,

                ui: {
                    head: '', //头图
                    tail: '', //详情图
                    share: '', //分享图
                    bg_color: '', //表单背景色
                },

                show_flag: {
                    is_foot: true, //底部按钮
                    is_success: false, //成功提示
                    is_error: false, //错误提示
                },

                //表单
                clue_info: {
                    id: 0, //线索信息
                    name: "",//名字
                    phone: "",//电话
                    series: '', //车型
                },

                current_index: 0,
                sale_info: null,
                valid_info: '',
            };
        },
        created() {
            this.activity_id = _url.getParam("id");
            this.sid = _url.getParam('sid'); //分享人

            let that = this
            _wx.openid(function () {
                //获取项目信息+个人信息
                api_clue.info(that.activity_id, that.sid, that.init)
            })

            if (this.sid > 0) {
                //销售信息
                api_saler.info(this.sid, function () {
                    that.sale_info = data
                })
            }
        },
        // 关闭浏览器时触发弹窗
        mounted() {
            _music.load(require('../../assets/music/starsky.mp3'))

            // // 监听页面滚动
            // window.addEventListener('scroll', this.handleScroll);
        },
        //组件销毁后清除事件
        destroyed() {
            // window.removeEventListener('scroll', this.handleScroll)
        },
        // 销毁之前
        beforeDestroy() {
            _music.unload()
        },
        methods: {

            init(data){
                this.init_info(data.activity)
                this.init_clue(data.clue)
            },

            //初始化项目信息
            init_info(data) {
                console.log(data, '项目信息')
                document.title = data.theme;

                this.info = {
                    stime: data.stime,
                    etime: data.etime,
                    is_stop: false, //项目结束标记
                    latitude: data.latitude, //经度
                    longitude: data.longitude, //纬度
                    money: (data.money > 0) ? data.money : 0, // 支付金额
                    name: data.name, //经销商
                    theme: data.theme, //主题
                    describe: data.describe, //描述
                    address: data.address, //地址
                    level: data.level, //
                }

                this.ui = {
                    head: data.head,
                    tail: data.tail,
                    share: data.share,
                    bg_color: data.bg_color,
                };

                //项目分享js参数
                api_weixin.share(this.init_share)

                //车型
                api_activity.car(this.info.level, this.init_car)

                _map.load('map_continer', Number(this.info.latitude), Number(this.info.longitude), this)

                //判断项目是否结束
                if (!data.state || _time._current() > data.etime) {
                    this.info.is_stop = true;
                }
            },

            //初始化线索信息
            init_clue(data) {
                if (data.status > 0) {
                    _router.jmp_url('/page/success?id=' + data.id)
                    return
                }

                //
                _object._cover(data, this.clue_info)
                this.clue_info.series = ''
            },

            init_share(data){
                //当前销售
                let options = {};
                options.title = this.info.theme;
                options.desc = this.info.describe;
                options.link = window.location.protocol + "//" + window.location.host + "" + window.location.pathname
                    + "?id=" + this.activity_id + "sid=" + this.sid;
                options.image = this.ui.share;
                _wx.js_api(data, _wx.share, options);
            },

            // 车型
            init_car(data) {
                this.car_list = data;
            },

            //选择品牌
            choose_brand(index) {
                this.current_index = index;
            },

            //拨打电话
            clickPhone(phone) {
                _confirm.query(this, '是否确认拨打电话？', '提示',function () {
                    window.location.href = 'tel:' + phone
                })
            },

            //提交表单 成功跳转
            submit_order() {
                let that = this;

                console.log(this.clue_info)
                if (!this.clue_info.name) {
                    this.handleVaild('请输入您的姓名');
                    return;
                }
                if (!this.clue_info.phone) {
                    this.handleVaild('请输入您的手机号');
                    return;
                }
                if (!_regular.is_mobile(this.clue_info.phone)) {
                    this.handleVaild('请输入正确的手机号');
                    return;
                }

                if (!this.clue_info.series) {
                    this.handleVaild('请选择您的意向车型');
                    return;
                }

                let data = {}
                data.clue_id = this.clue_info.id
                data.phone = this.clue_info.phone
                data.name = this.clue_info.name
                data.series = this.clue_info.series

                api_clue.order(data, this.call_pay)
            },

            call_pay(parameters){
                console.log(parameters, 'pay')
                let that = this;
                _wx.call(parameters, function (data) {
                    that.handleVaild(data.msg, 'msg')
                    setTimeout(()=>{
                        _router.jmp_url('/page/success?id=' + parameters.id)
                    },2000)
                }, function () {
                    console.log('用户取消支付')
                })
            },

            //倒计时
            get_time() {
                let date = Math.floor(Date.now() / 1000);
                //时间差
                let count_time = this.stime - date;

                //定义变量 d,h,m,s保存倒计时的时间
                if (count_time >= 0) {
                    this.countdown.day = Math.floor(count_time / 60 / 60 / 24);
                    this.countdown.hour = Math.floor((count_time / 60 / 60) % 24);
                    this.countdown.minute = Math.floor((count_time / 60) % 60);
                    this.countdown.second = Math.floor(count_time % 60);
                }
                //递归每秒调用countTime方法，显示动态时间效果
                setTimeout(this.get_time, 1000);
            },

            //
            handleVaild(msg) {
                this.valid_info = msg;
                this.show_flag.is_error = true;
                setTimeout(() => {
                    this.show_flag.is_error = false;
                    this.valid_info = ''
                }, 2000)
            },

            // 金额转换
            to_yuan(v) {
                return parseInt(_float.to_fixed(v / 100))
            },

            // //置顶
            // handleScroll: function () {
            //     let scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;
            //     this.$nextTick(() => {
            //         if (scrollHeight >= this.$refs.tailImage.offsetTop) {
            //             this.show_flag.is_foot = false;
            //         } else {
            //             this.show_flag.is_foot = true;
            //         }
            //     })
            // },
        },
    };
</script>

<style lang="less" scoped>
    @import "../../assets/style/page/common.less";

</style>


